<template>
  <div class="home">
    <swipper />
    <collapseCourses :coursesData="coursesData" />
    <collapseCoursesmore />
  </div>
</template>

<script>
import swipper from "./swiper";
import collapseCourses from "./collapseCourses";
import collapseCoursesmore from "./collapseCoursesmore";
import { getCurriculumlist } from "@/request/courses";
import { mapState } from "vuex";
export default {
  components: {
    swipper,
    collapseCourses,
    collapseCoursesmore,
  },
  data() {
    return {
      coursesData: [],
    };
  },
  computed: {
    ...mapState({
      userInfo: (state) => state.user.userInfo,
    }),
    filterUserAuth() {
      return this.userInfo?.authName?.indexOf("教师") || this.userInfo?.authName?.indexOf("课程设计师")
    }
  },
  created() {
    this.fetchCurriculumlist();
    this.fetchCourses()
  },
  methods: {
    // 获取可选修课程
    fetchCurriculumlist() {
      getCurriculumlist().then((data) => {
        // if (res.errno === 0) {

        data = data.filter((item) => {
          if (item.currNo == 6 && item.courseID === 8) {
            if ([225].indexOf(this.userInfo.userID) !== -1) {
              return item;
            }
          } else {
            return item;
          }
        });
        this.coursesData = data?.reverse() || [];
        // }
      });
    },
    // 获取课程库的课程
    fetchCourses() {
      this.$store.dispatch("courses/fetchCourses")
    }
  },
};
</script>

<style lang="stylus">
.home {
  padding-top: 32px;
  padding-bottom: 30px;
  margin: 0 auto;
  max-width: 1200px;
}
@media only screen and (max-width: 1070px) {
  .homeSwiper {
    width: auto !important;
  }
}

@media only screen and (max-width: 975px) {
  .right-info {
    flex: 1;
  }
  .home-carouselBox {
    display: none !important;
  }
}
@media only screen and (max-width: 700px) {

  .el-collapse-item__header {
    display: flex;
    .title {
      margin: 0 !important;
      flex: 1;
      text-align: center;
    }
  }

 
}

@media only screen and (max-width: 603px) {
  .el-collapse-item__content .courses {
    justify-content: center !important;
  }
}
</style>
